<template>
  <el-form ref='form' :model='form' label-width='100px'>
    <el-form-item label='上传头像'>
      <el-upload
          class='avatar-uploader'
          action='https://jsonplaceholder.typicode.com/posts/'
          :show-file-list='false'
          :on-success='handleAvatarSuccess'
          :before-upload='beforeAvatarUpload'>
        <img v-if='imageUrl' :src='imageUrl' class='avatar'>
        <div v-else class='noImg'><i class='el-icon-plus avatar-uploader-icon'></i></div>
        <el-input v-if='imageUrl' style='display:none' type='text' v-model='form.ava' hidden :value='imageUrl'></el-input>
      </el-upload>
    </el-form-item>
    <el-row>
      <el-col :span='6'>
        <el-form-item label='姓名'>
          <el-input v-model='form.name'></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label='性别'>
          <el-select v-model='form.sex' placeholder='请选择性别' style="width:100%">
            <el-option label='男' value='男'></el-option>
            <el-option label='女' value='女'></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label='身份证号' label-width='100px'>
          <el-input v-model='form.IdCard' placeholder='请输入身份证号'></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label='出生年月日' label-width='100px'>
          <el-input v-model='form.birthday' disabled placeholder='请输入出生年月日'></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label='年龄' label-width='100px'>
          <el-input v-model='form.age' disabled placeholder='请输入年龄'></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label='学历'>
          <el-select v-model='form.education' placeholder='请选择' style="width:100%">
          <el-option label='大专' value='大专'></el-option>
          <el-option label='大学' value='大学'></el-option>
          <el-option label='研究生' value='研究生'></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label='学位'>
          <el-select v-model='form.degree' placeholder='请选择' style="width:100%">
            <el-option label='硕士生' value='硕士生'></el-option>
            <el-option label='博士生' value='博士生'></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label='专业'>
          <el-input v-model='form.major'></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label='职称'>
            <el-select v-model='form.title' placeholder='请选择职称' style="width:100%">
            <el-option label='职称1' value='职称1'></el-option>
            <el-option label='职称2' value='职称2'></el-option>
            </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label='工作单位'>
        <el-input type='textarea' v-model='form.workunits'></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label='工作经历'>
        <el-input type='textarea' v-model='form.experience'></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label='受教育经历'>
        <el-input type='textarea' v-model='form.educationexperience'></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label='接受培训情况'>
        <el-input type='textarea' v-model='form.training'></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label='资格证书情况'>
        <el-input type='textarea' v-model='form.certificate'></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label='个人承诺'>
          <el-input type='textarea' auto-height :value="promise" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>
            <el-form-item>
            <el-radio v-model='form.promise' label='0'>同意</el-radio>
            <el-radio v-model='form.promise' label='1'>不同意</el-radio>
            </el-form-item>
  </el-form>
</template>
<script>
export default {
  props: ['form'],
  data () {
    return {
      imageUrl: '',
      promise:
        '本人承诺严格遵守《干细胞临床研究管理办法（试行）》和《干细胞制剂质量控制及临床前研究指导原则（试行）》等规定；该简历表内容均真实、来源合法，未侵犯他人的权益。如查有不实之处，本人承担由此导致的一切后果。'
    }
  },
  methods: {
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      console.log(file.type)
      const isJPG = file.type === 'image/jpeg' || 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 90px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar,
.noImg {
  width: 90px;
  height: 120px;
  display: block;
  border: 1px solid #eee;
}
</style>
